<%@ page import="com.alibaba.fastjson.JSON" %><%--
  Created by IntelliJ IDEA.
  User: DE
  Date: 2019/4/9
  Time: 17:47
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>业绩</title>
    <link href="<%=basePath%>resources/layui/css/layui.css" rel="stylesheet"></link>
    <link href="<%=basePath%>resources/css/style.css" rel="stylesheet"></link>


</head>
<body>
 <!-- layout admin -->
 <div class="layui-layout layui-layout-admin"> <!-- 添加skin-1类可手动修改主题为纯白，添加skin-2类可手动修改主题为蓝白 -->
     <!-- header -->
     <div class="layui-header my-header">
         <a href="<c:if test="${user.usertype==1}"><%=basePath%>order/orderlist</c:if><c:if test="${user.usertype==0}"><%=basePath%>page/manager/orderManager</c:if>">
             <!--<img class="my-header-logo" src="" alt="logo">-->
             <div class="my-header-logo">校园便捷服务平台</div>
         </a>


         <!-- 顶部右侧添加选项卡监听 -->
         <ul class="layui-nav my-header-user-nav" lay-filter="side-top-right">
             <li class="layui-nav-item"><span id="datetime"></span>&nbsp;</li>
             <li class="layui-nav-item">
                 <a href="<c:if test="${user.usertype==1}"><%=basePath%>order/orderlist</c:if><c:if test="${user.usertype==0}"><%=basePath%>page/manager/orderManager</c:if>">主页</a>
             </li>
             <li class="layui-nav-item">
                 <a href="<%=basePath%>order/acceptOrderlist">我的订单<!--<span class="layui-badge">9</span>--></a>
             </li>
             <li class="layui-nav-item">
                 <a href="<%=basePath%>page/user/personalCenter">个人中心<!--<span class="layui-badge-dot"></span>--></a>
             </li>
             <li class="layui-nav-item">
                 <a href="<%=basePath%>page/user/personalCenter"><c:if test="${user.userimg!=null}"><img src="<%=basePath%>${user.userimg}" class="layui-nav-img"></c:if>${user.username}</a>
                 <dl class="layui-nav-child">
                     <dd><a href="javascript:;" onclick="logout()">退出系统</a></dd>
                 </dl>
             </li>
         </ul>
     </div>


     <!-- body -->
     <div class="layui-body my-body"  style="background-color: #F6F6F6;">

         <!-- 工具集 -->
         <div class="my-btn-box">
            <span class="fl">
                <span class="layui-form-label">搜索条件：</span>
                <div class="layui-inline">

                    <%--<input type="text" autocomplete="off" style="width:260px" placeholder="用户名" id="key"
                           name="key" class="layui-input">--%>
                    <select name="key" id="key" class="layui-select"  lay-filter="xmFilter">
                    <option value="">所有人</option>
                    </select>
                </div>
                <label>工单创建时间</label>
        <div class="layui-input-inline">
            <input type="text" id="start_time" name="start_time" autocomplete="off" placeholder="开始时间"
                   class="layui-input">
        </div> 至
        <div class="layui-input-inline">
            <input type="text" id="end_time" name="end_time" autocomplete="off" placeholder="结束时间" class="layui-input">
        </div>

                <button class="layui-btn layui-btn-danger mgl-20" onclick="datareload()" data-type="reload">查询</button>
                <!--<a class="layui-btn btn-default btn-add" id="btn-add-article">添加</a>-->
            </span>
             <span class="fr">

            </span>
         </div>
         <div id="personalPerformance" style="width: 80%;height: 80%;margin:0 auto;"></div>




     </div>

 </div>
 <script type="text/javascript" src="<%=basePath%>resources/jquery-3.2.1/jquery-3.2.1.js" ></script>
 <script src="<%=basePath%>resources/layui/layui.js"></script>
 <script src="<%=basePath%>resources/js/vip_comm.js"></script>
 <script src="<%=basePath%>resources/js/functionList.js"></script>
 <script src="<%=basePath%>resources/echarts/echarts.min.js"></script>
 <script type="text/javascript">


     layui.use(['form', 'layer', 'laydate'], function () {


         var laydate = layui.laydate;
         var endDate = laydate.render({
             type:'date',
             elem: '#end_time',//选择器结束时间
         });
         //日期范围
         var startDate = laydate.render({
             type:'date',
             elem: '#start_time',
             max: "2099-12-31"//设置一个默认最大值
         });



         var form = layui.form;

         $.ajax({
             url: '<%=basePath%>user/allUsers',
             dataType: 'json',
             type: 'get',
             data:{
                 'limit':30,
                 'page':1
             },
             success: function (data) {
                 console.log(JSON.stringify(data.data));
                 $.each(data.data, function (index, item) {
                     /*console.log(JSON.stringify(item));*/
                     $('#key').append(
                         "<option value='"+JSON.stringify(item.userid)+"'>"+item.username.toString()+"</option>");
                        /* new Option(item.username, item.userid));// 下拉菜单里添加元素*/
                 });
                 layui.form.render("select");


             }
         });

     });


     // 基于准备好的dom，初始化echarts实例
     var myChart = echarts.init(document.getElementById('personalPerformance'));


     $.ajax({
         type: "get",
         url: "<%=basePath%>order/dataPerformance",
         data:{
             'key':$('#key').val()
         },
         success: function(datas){
             var option = {
                 title: {
                     text:$("#key option:selected").text()+'工单统计'
                 },
                 tooltip: {},
                 legend: {
                     data:['工单数'],

                 },
                 xAxis: {
                     data: ["总工单数","正在进行","已完成","已发布","投诉"]

                 },
                 yAxis: {},
                 series: [{
                     name: '工单数',
                     type: 'bar',
                     data: datas.data,
                     itemStyle: {normal: {
                         color:'#009688'
                         }}
                 }]
             };

             // 使用刚指定的配置项和数据显示图表。
             myChart.setOption(option);

         }});


     function datareload() {

         $.ajax({
             type: "post",
             url: "<%=basePath%>order/dataPerformance",
             data:{'key':$('#key').val(),
                 startDate:$("#start_time").val(),
                 endDate:$("#end_time").val()

             },
             success: function(datas){
                 var option = {
                     title: {
                         text: $("#key option:selected").text()+'工单统计'
                     },
                     tooltip: {},
                     legend: {
                         data:['工单数'],

                     },
                     xAxis: {
                         data: ["总工单数","正在进行","已完成","已发布","投诉"]

                     },
                     yAxis: {},
                     series: [{
                         name: '工单数',
                         type: 'bar',
                         data: datas.data,
                         itemStyle: {normal: {
                                 color:'#009688'
                             }}
                     }]
                 };

                 // 使用刚指定的配置项和数据显示图表。
                 myChart.setOption(option);

             }});


     }


     // 指定图表的配置项和数据






    /**
     * 显示时间
     * */
     writeDateInfo();


 </script>

</body>
</html>
